import React from 'react';
import { Modal, Tree, Button } from 'antd';
import { connect } from 'umi';

import { ConnectState } from '@/models/connect';
import styles from './style.less';

interface UploadModelProps {
  modalVisible: boolean;
  onCancel: () => void;
  RoleDetail: Array<any>;
}

const DetailModel: React.FC<UploadModelProps> = (props) => {
  const { modalVisible, onCancel, RoleDetail } = props;

  const treeData: Array<any> = [];
  RoleDetail.map((item) => {
    if (!item.parentId) {
      // 获取子级数据
      function getChildrenData(data: Array<any>) {
        let childrenArr: Array<any> = [];
        data.map((v: any) => {
          childrenArr.push({
            title: v.name,
            key: String(v.id),
            children: getChildrenData(RoleDetail.filter((n) => n.parentId === v.id)),
          });
        });
        return childrenArr;
      }

      treeData.push({
        title: item.name,
        key: String(item.id),
        children: getChildrenData(RoleDetail.filter((v) => v.parentId === item.id)),
      });
    }
  });

  return (
    <Modal
      width={400}
      bodyStyle={{ padding: '32px 0 0 0' }}
      destroyOnClose
      title="数据详情"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <div style={{ padding: '0 20px' }}>
        <Tree treeData={treeData} />
      </div>
      <div className={styles.footerWrap}>
        <Button type="primary" onClick={() => onCancel()}>
          确定
        </Button>
      </div>
    </Modal>
  );
};

export default connect(({ dataRole }: ConnectState) => ({
  RoleDetail: dataRole.RoleDetail || [],
}))(DetailModel);
